import React, { useEffect, useMemo, useState } from 'react'
import {NavBar } from 'antd-mobile'
import { Input, Sticky } from 'react-vant'
import { LeftOutline } from 'antd-mobile-icons'
import { Search, DeleteO, Replay } from '@react-vant/icons';
import Pro from './Pro';
import '@nutui/nutui-react/dist/style.css'
import axios from 'axios';
export default function SearHistory() {
    const back = () => {
        window.history.back();
    }
    let [sear, setSear] = useState('')
    let [pros, setPros] = useState([])
    let [num,setNum]=useState(0)
    let getPros = async () => {
        let result = await axios.get('http://localhost:3000/zhaojunjie/pros')
        if (result.data.code === 200) {
            setPros(result.data.data)
        }
    }
    let [hisls, setHisls] = useState(JSON.parse(sessionStorage.getItem('history')) || [])
    useEffect(() => {
        getPros()
    },[])
    let prols = useMemo(() => {
        let prols
        prols = pros.sort((a, b) => b.salesnum - a.salesnum)
        console.log(prols);
        return prols
    }, [pros])
    let prols1 = useMemo(() => {
        return pros.filter(ele => ele.activity==='新品推荐')
    }, [pros])
    console.log(hisls);
    return (
    <div className='Sear'>
        <Sticky>
            {/* <NavBar onBack={back} style={{ borderBottom: '1px solid gainsboro', padding: '5px 0', fontSize: '20px', fontWeight: '600', backgroundColor: 'white' }}>商品搜索</NavBar> */}
            <div className='header'>
                <LeftOutline fontSize={25} />
                    <Input prefix={<Search fontSize={30} />} value={sear} onChange={(e) => { setSear(e); console.log(sear); }}
                        onKeyUp={(e) => {
                            if (e.keyCode === 13) {
                                let arr = hisls; arr.push(sear);
                                setHisls([...arr]);
                                console.log(arr);
                                sessionStorage.setItem('history', JSON.stringify(arr));
                                setSear('')
                            }
                        }} ></Input>
                <span>取消</span>
            </div>
        </Sticky>
        <div className='history'>
            <p><span>历史记录</span><DeleteO fontSize={25} onClick={()=>{setHisls([])}} /></p>
            <div>
                {
                    hisls.map((ele, i) => (
                        <span key={i} onClick={(e) => { setSear(e.target.innerHTML)}}>{ ele}</span>
                    ))
                }
            </div>
            <p><span>搜索发现</span><Replay fontSize={25} /></p>
            <div>
                {
                        prols.slice(0,7).map(ele => (
                            <span key={ele._id} onClick={() => {
                                let arr = hisls; arr.push(ele.name);
                                setHisls([...arr]);
                                console.log(arr);
                                sessionStorage.setItem('history', JSON.stringify(arr));
                                setSear('')
                            }}>{ ele.name}</span>
                    ))
                }
            </div>
        </div> 
            <div className='Probox'>
                <div className='Prols'>
                    <div className='Pros' style={{ background:'linear-gradient(rgb(254, 249, 220), white)'}}>
                        <h4>人气热搜榜</h4>
                        {
                            prols.map(ele => (
                                <Pro data={ele} key={ele._id} />
                            ))
                        }
                    </div>
                    <div className='Pros'>
                        <h4>新品上新榜</h4>
                        {
                            prols1.map(ele => (
                                <Pro data={ele} key={ele._id} />
                            ))
                        }
                    </div>
                </div>
            </div>    
      
    </div>
  )
}
